import React from "react";
import ReactDom from "react-dom";
import uuid1 from "uuid";
var uuid = uuid1.v1;

class List extends React.Component{
  constructor(props){
    super(props);
    this.state={};
    this.del = this.del.bind(this);
    this.state.list = props.list.map(function(str){
      return {str,key:uuid()}
    });
  }

  del(key){
    let keyIndex;
    this.state.list.forEach((item,index)=>{
      if(key==item.key){
        keyIndex =index;
      }
    });
    this.state.list.splice(keyIndex,1);
    this.setState({list:this.state.list});
  }

  render(){

    const lis = this.state.list.map(item=><li onClick={()=>this.del(item.key)} key={item.key}>{item.str}</li>);
    return<ul>
      {lis}
      </ul>
  }
}
const list=["aaa","bbb","ccc","ddd"];
ReactDom.render(<List list={list} />,document.body);
